<p-confirmDialog></p-confirmDialog>
<div class="inbound-manage-container">
<!-- 页面标题 -->
<div class="page-header">
    <h1 class="page-title">
      <i class="fas fa-warehouse"></i>
      入库管理
    </h1>
    <p class="page-description">管理所有入库订单和相关信息</p>
  </div>

  <!-- 搜索和操作栏 -->
  <div class="action-bar">
    <div class="search-row">
      <div class="search-section">
        <div class="search-box">
          <input type="text" [(ngModel)]="searchKeyword" placeholder="搜索入库单号、商品名称..." class="search-input"
            (keyup.enter)="search()">
          <div class="search-btn-group">
            <button class="search-btn" (click)="search()">
              <i class="fas fa-search"></i>
            </button>
            <button class="reset-btn" type="button" (click)="resetSearch()">重置</button>
          </div>
        </div>
      </div>
    </div>
    <div class="action-buttons">
      <button class="btn btn-primary" (click)="addNew()">
        <i class="fas fa-plus"></i>
        新增入库
      </button>
      <button class="btn btn-secondary" (click)="loadData()">
        <i class="fas fa-refresh"></i>
        刷新
      </button>
    </div>
  </div>

  <!-- 数据表格 -->
  <div class="table-container">
    <div class="table-header">
      <div class="table-info">
        <span class="total-count">共 {{ totalCount }} 条记录</span>
        <span class="current-page">第 {{ currentPage }} 页</span>
      </div>
    </div>

    <div class="table-wrapper">
      <table class="data-table">
        <thead>
          <tr>
            <th>入库单号</th>
            <th>入库类型</th>
            <th>状态</th>
            <th>入库日期</th>
            <th>仓库名称</th>
            <th>入库商品</th>
            <th>负责人</th>
            <th>联系方式</th>
            <th>数量</th>
            <th>金额</th>
            <th>制单人</th>
            <th>制单时间</th>
            <th>操作</th>
            <th>ID调试</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngIf="loading" class="loading-row">
            <td colspan="11" class="loading-cell">
              <div class="loading-spinner">
                <i class="fas fa-spinner fa-spin"></i>
                加载中...
              </div>
            </td>
          </tr>

          <tr *ngIf="!loading && inboundList.length === 0" class="empty-row">
            <td colspan="11" class="empty-cell">
              <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <p>暂无入库记录</p>
              </div>
            </td>
          </tr>

          <tr *ngFor="let item of inboundList" class="data-row">
            <td class="order-number">{{ item.inboundOrderNumber }}</td>
            <td class="inbound-type">{{ item.inboundType }}</td>
            <td>
              <span class="status-badge" [ngClass]="getStateClass(item.state)">
                {{ item.state | documentStatus }}
              </span>
            </td>
            <td class="date">{{ item.inboundDate | date:'yyyy-MM-dd' }}</td>
            <td class="warehouse">{{ item.warehouseName }}</td>
            <td class="goods">{{ item.inboundGood }}</td>
            <td class="attn">{{ item.attn }}</td>
            <td class="contact-phone">{{ item.contactPhone }}</td>
            <td class="quantity">{{ item.inboundQuantity }}</td>
            <td class="amount">¥{{ item.inboundAmount | number:'1.2-2' }}</td>
            <td class="maker">{{ item.makeSingle }}</td>
            <td class="make-time">{{ item.makeSingleTime | date:'yyyy-MM-dd HH:mm' }}</td>
            <td class="actions">
              <button class="action-btn edit-btn" (click)="editItem(item)" title="编辑">
                <i class="fas fa-edit"></i>
              </button>
              <button class="action-btn approve-btn" (click)="showApproval(item)" title="审批" *ngIf="canApprove(item)">
                <i class="fas fa-check-circle"></i>
              </button>
              <button class="action-btn delete-btn" (click)="deleteItem(item.id!)" title="删除">
                <i class="fas fa-trash"></i>
              </button>
            </td>
            <td>{{ item.id }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination" *ngIf="totalCount > 0">
      <div class="pagination-info">
        显示 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, totalCount) }} 条，共 {{ totalCount
        }} 条
      </div>
      <div class="pagination-controls">
        <button class="page-btn" [disabled]="currentPage === 1" (click)="onPageChange(currentPage - 1)">
          上一页
        </button>

        <button *ngFor="let page of getPageNumbers()" class="page-btn" [class.active]="page === currentPage"
          [class.ellipsis]="page === -1" (click)="page !== -1 && onPageChange(page)">
          <span *ngIf="page !== -1">{{ page }}</span>
          <span *ngIf="page === -1">...</span>
        </button>

        <button class="page-btn" [disabled]="currentPage >= getTotalPages()" (click)="onPageChange(currentPage + 1)">
          下一页
        </button>
      </div>
    </div>
  </div>

  <!-- 新增/编辑表单模态框 -->
  <div class="modal-overlay" *ngIf="showForm" (click)="cancelForm()">
    <div class="modal-content" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>{{ isEdit ? '编辑入库记录' : '新增入库记录' }}</h3>
        <button class="close-btn" (click)="cancelForm()">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="modal-body">
        <form class="form form-two-column">
          <div class="form-row">
            <div class="form-group">
              <label>入库单号</label>
              <input type="text" [(ngModel)]="formData.inboundOrderNumber" name="inboundOrderNumber"
                class="form-control" required [readonly]="true">
            </div>
            <div class="form-group">
              <label>入库类型</label>
              <select [(ngModel)]="formData.inboundType" name="inboundType" class="form-control" required>
                <option value="">请选择入库类型</option>
                <option *ngFor="let type of inboundTypes" [value]="type.value">
                  {{ type.label }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>关联单号</label>
              <input type="text" [(ngModel)]="formData.relatedOrderNo" name="relatedOrderNo" class="form-control"
                [readonly]="showOrderSelectBtn">
              <button *ngIf="showOrderSelectBtn" type="button" class="btn btn-sm btn-info" style="margin-top:4px;"
                (click)="openOrderSelectDialog()">选择单据</button>
            </div>
            <div class="form-group">
              <label>供应商</label>
              <input type="text" [(ngModel)]="formData.supplierName" name="supplierName" class="form-control" readonly>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>联系人</label>
              <input type="text" [(ngModel)]="formData.contactPerson" name="contactPerson" class="form-control"
                readonly>
            </div>
            <div class="form-group">
              <label>联系方式</label>
              <input type="text" [(ngModel)]="formData.contactPhone" name="contactPhone" class="form-control" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>仓库名称</label>
              <select [(ngModel)]="formData.warehouseName" name="warehouseName" class="form-control" required>
                <option value="">请选择仓库</option>
                <option *ngFor="let w of warehouseOptions" [value]="w.value">{{ w.label }}</option>
              </select>
            </div>
            <div class="form-group">
              <label>入库商品</label>
              <input type="text" [(ngModel)]="formData.inboundGood" name="inboundGood" class="form-control" required>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>负责人</label>
              <input type="text" [(ngModel)]="formData.attn" name="attn" class="form-control" required>
            </div>
            <div class="form-group">
              <label>数量</label>
              <input type="number" [(ngModel)]="formData.inboundQuantity" name="inboundQuantity" class="form-control" min="0" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>金额</label>
              <input type="number" [(ngModel)]="formData.inboundAmount" name="inboundAmount" class="form-control"
                min="0" step="0.01" required>
            </div>
            <div class="form-group">
              <label for="makeSingle">制单人</label>
              <input type="text" id="makeSingle" name="makeSingle" [(ngModel)]="formData.makeSingle"
                class="form-control" />
            </div>
          </div>

          <!-- Tab切换栏 -->
          <div class="tab-bar" style="margin-top: 16px; margin-bottom: 8px;">
            <span class="tab-btn" [class.active]="recordTab === 'detail'" (click)="recordTab = 'detail'">入库明细</span>
            <span class="tab-btn" [class.active]="recordTab === 'operation'"
              (click)="recordTab = 'operation'">操作记录</span>
            <span class="tab-btn" [class.active]="recordTab === 'approval'" (click)="recordTab = 'approval'">审核记录</span>
          </div>

          <!-- Tab内容区：明细/操作/审核 -->
          <div *ngIf="recordTab === 'detail'">
            <!-- 自定义文件上传控件：放在明细表上方 -->
            <div style="margin-bottom: 16px;">
              <div class="file-upload-area" (click)="fileInput.click()">
                <input #fileInput type="file" class="d-none" (change)="onFileSelected($event)" multiple
                  accept=".jpg,.png,.pdf,.doc,.docx,.xls,.xlsx,.zip,.rar">
                <div class="upload-icon">
                  <i class="fas fa-cloud-upload-alt"></i>
                </div>
                <div class="upload-text">
                  点击或拖拽文件到此处上传
                  <div class="text-muted small mt-1">支持的文件格式：PDF、Word、Excel</div>
                </div>
              </div>

              <!-- 已上传文件列表 -->
              <div *ngIf="uploadedFiles.length > 0" class="uploaded-files mt-3">
                <div *ngFor="let file of uploadedFiles" class="file-item">
                  <i class="pi pi-file"></i>
                  <span>{{file.name}}</span>
                  <a *ngIf="file.url" [href]="file.url" target="_blank" style="margin-left:8px;color:#409eff">下载</a>
                  <button type="button" class="btn btn-sm btn-danger" (click)="removeFile(file)">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </div>


            <!-- 原有明细表格内容 -->
            <div class="details-table-wrapper">
                <div style="margin-bottom: 8px;">
                  <button type="button" class="btn btn-sm btn-action" (click)="openProductModal()">
                    <i class="fas fa-plus"></i> 添加货品
                  </button>
                
                </div>
                <table class="details-table">
                  <thead>
                    <tr>
                      <th>货品名称</th>
                      <th>货品编码</th>
                      <th>规格型号</th>
                      <th>库位</th>
                      <th class="col-quantity">数量</th>
                      <th class="col-price">单价</th>
                      <th class="col-amount">金额</th>
                      <th>备注</th>
                      <th class="col-actions">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngIf="details.length === 0">
                      <td colspan="9" class="text-center empty-details">
                        <p>暂无明细，请点击 "添加货品" 来选择。</p>
                      </td>
                    </tr>
                    <tr *ngFor="let detail of details; let i = index">
                      <td>{{ detail.productName }}</td>
                      <td>{{ detail.productCode }}</td>
                      <td>{{ detail.model }}</td>
                      <td>
                        <input type="text" class="form-control input-sm" [(ngModel)]="detail.location"
                          [name]="'location' + i">
                      </td>
                      <td>
                        <input type="number" class="form-control input-sm" [(ngModel)]="detail.quantity"
                          [name]="'quantity' + i" (ngModelChange)="updateAmount(detail)" min="1">
                      </td>
                      <td>
                        <input type="number" class="form-control input-sm" [(ngModel)]="detail.unitPrice"
                          [name]="'unitPrice' + i" (ngModelChange)="updateAmount(detail)" min="0">
                      </td>
                      <td>{{ detail.amount | number:'1.2-2' }}</td>
                      <td>
                        <input type="text" class="form-control input-sm" [(ngModel)]="detail.remarks"
                          [name]="'remarks' + i">
                      </td>
                      <td>
                        <button type="button" class="btn btn-sm btn-danger" (click)="removeDetail(i)">
                          <i class="fas fa-trash"></i>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div style="text-align: right; margin-top: 8px; font-weight: bold; font-size: 16px;">
                入库总金额：
                <span style="color: #ff6600;">{{ getTotalAmount() | number:'1.2-2' }}</span>
              </div>
            </div>


            <div *ngIf="recordTab === 'operation'">
                <!-- 操作记录表格 -->
                <table class="table table-bordered log-table">
                  <thead>
                    <tr>
                      <th>操作时间</th>
                      <th>操作人</th>
                      <th>操作类型</th>
                      <th>描述</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngIf="!operationLogs || operationLogs.length === 0">
                      <td colspan="4" class="empty-cell">暂无操作记录</td>
                    </tr>
                    <tr *ngFor="let log of operationLogs">
                      <td>{{ log.creationTime | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                      <td>{{ log.operatorName }}</td>
                      <td>{{ log.operationType }}</td>
                      <td>{{ log.description }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
    
              <div *ngIf="recordTab === 'approval'">
                <!-- 审核记录表格 -->
                <table class="table table-bordered log-table">
                  <thead>
                    <tr>
                      <th>操作时间</th>
                      <th>操作人</th>
                      <th>操作类型</th>
                      <th>审核结果</th>
                      <th>审核意见</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngIf="!approvalHistories || approvalHistories.length === 0">
                      <td colspan="5" class="empty-cell">暂无审核记录</td>
                    </tr>
                    <tr *ngFor="let item of approvalHistories">
                      <td>{{ item.creationTime | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                      <td>{{ item.operatorName }}</td>
                      <td>{{ item.operationType }}</td>
                      <td>{{ item.approvalResult }}</td>
                      <td>{{ item.approvalComment }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="cancelForm()">
              取消
            </button>
            <button type="button" class="btn btn-primary" (click)="saveForm()" [disabled]="isSaving">
              <i class="fas" [class.fa-spinner]="isSaving" [class.fa-spin]="isSaving"></i>
              {{ isEdit ? (isSaving ? '更新中...' : '更新') : (isSaving ? '保存中...' : '保存') }}
            </button>
          </div>
        </div>
      </div>

      <!-- 审批对话框 -->
  <div class="modal-overlay" *ngIf="showApprovalDialog" (click)="cancelApproval()">
    <div class="modal-content approval-modal" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>入库审批</h3>
        <button class="close-btn" (click)="cancelApproval()">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="modal-body">
        <div class="approval-info" *ngIf="approvalItem">
          <div class="info-row">
            <span class="label">入库单号：</span>
            <span class="value">{{ approvalItem.inboundOrderNumber }}</span>
          </div>
          <div class="info-row">
            <span class="label">入库商品：</span>
            <span class="value">{{ approvalItem.inboundGood }}</span>
          </div>
          <div class="info-row">
            <span class="label">入库数量：</span>
            <span class="value">{{ approvalItem.inboundQuantity }}</span>
          </div>
          <div class="info-row">
            <span class="label">入库金额：</span>
            <span class="value">¥{{ approvalItem.inboundAmount | number:'1.2-2' }}</span>
          </div>
        </div>

        <div class="approval-form">
          <div class="form-group">
            <label>审批结果</label>
            <div class="radio-group">
              <label class="radio-item">
                <input type="radio" [(ngModel)]="approvalState" [value]="1" name="approvalState">
                <span class="radio-label">同意</span>
              </label>
              <label class="radio-item">
                <input type="radio" [(ngModel)]="approvalState" [value]="3" name="approvalState">
                <span class="radio-label">拒绝</span>
              </label>
            </div>
          </div>

          <div class="form-group">
            <label>审批意见</label>
            <textarea [(ngModel)]="approvalComment" name="approvalComment" class="form-control" rows="4"
              placeholder="请输入审批意见..." required></textarea>
          </div>
        </div>
      </div>

      <div class="form-actions" style="display: flex; justify-content: center; gap: 18px; margin-top: 18px;">
        <button type="button" class="btn btn-secondary" (click)="cancelApproval()">
          取消
        </button>
        <button type="button" class="btn btn-primary" (click)="submitApproval()">
          提交审批
        </button>
      </div>
    </div>
  </div>

</div>